✍Udemy/Ts/section5/60 : es5 & es6

본 PR은 청강 1회독을 마친 후 N회독으로 작성된 PR입니다.

🔗Reference

• js 컴파일 참고자료(1)
• js 컴파일 참고자료(2)

🔥KeyWord

• dist
• complier
• es5 & es6

📝Description

• dist

  • dist 디렉토를 살펴보면 다음과 같다.

    //es6
    "use strict";
    class Department {
        constructor(n) {
            this.name = n;
        }
    }
    const accounting = new Department('Accounting');
    console.log(accounting);
    

  우리가 클래스로 실행한 파일의 결과에서는 프로퍼티가 존재하지 않는다. 바로 contruct에는 여전히 매개변수를 name 필드가 정의 되어 있다. 현재 우리는 es6환경으로 컴파일되게 ts.config에 compilerOptions를 target으로 설정 하였다. 그렇다면 기존과는 다르게 es5로 설정하고 컴파일 하면 어떻게 될까?

  //es5
  "use strict";
  var Department = /** @class */ (function () {
      function Department(n) {
          this.name = n;
      }
      return Department;
  }());
  var accounting = new Department('Accounting');
  console.log(accounting);
  

  es5환경에서는 class가 일반적인 함수로 변경 되었다. 즉, 우리가 설정한 construct가 함수로 변형된 것이다. 그리고 return문에는 해당 함수를 감싼 변수를 반환하고 있다. es5는 바닐라 js라고 지칭하고 es6는 모던 js라고 지칭한다. 따라서 이 둘의 컴파일된 모습은 es5와 es6의 문법을 준수해서 청사진 class를 생성하는 방법들인 것이다. 이렇게 된 변경된 이유는 직관적이지 않다는 이유였기 때문이다. 그만큼 class가 개발자들 사이에서 당연하게 이해하고 학습되기 때문이라고 볼 수 있다. 따라 ts가 클래스와 유사한 이유와 대중적으로 많이 사용되게 된 이유 또한 위와 같은 이유에서 비롯된게 아닐까 한다. 다시 말해서 constrcut에 집중 했느냐 안했느냐에 따른 차이라고 봐도 좋다고 생각한다.

• compiler

  • 컴파일은 고급 언어로 작성된 코드를 기계어로 변환하는 과정을 말한다. build는 소스 코드를 실행 가능한 파일로 만드는 과정을 의미한다. 참고로 build과정에서 컴파일의 과정이 함께 존재한다.
  • 컴파일이 필요한 이유는 브라우저 엔진 때문이다. 전체적인 과정을 나열해보면 다음과 같다.
    1. 엔진(브라우저라면 내장엔진 - 크롬기준 V8)이 스크립트를 읽는다. (파싱)
    2. 읽어들인 스크립트를 기계어로 전환한다. (컴파일)
    3. 기계어로 전환된 코드가 실행된다. 기계어로 전환되었기 때문에 실행속도가 빠르다. (실행)
  • 컴파일이 기계어로 변환되는 디테일한 과정을 이해하고 다루기에는 학습 주제와는 많이 동떨어져서 이정도로 이해하고 추후에 디테일하게 다루어 보면 좋을 듯 하다.

📌Summary

• js가 컴파일되는 과정과 빌드가 되는 과정을 디테일하게 추후에 시간을 가지고 학습하면 좋을 듯 하다.